<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/fangdajing.css">
  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 60%;
      height: 45%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .btn {
      width: 100%;
      height: 30px;
      background: pink;
      position: relative;
    }

    .swiper-button-next {
      right: 10%;
      top: 10%;
    }
  </style>
</head>

<body>
  <!-- 放大镜的效果 -->
  <div class="bigbox">
    <div class="left">
      <div>分享</div>
      <div>加入收藏</div>
      <div></div>
    </div>
    <div class="center">
      <p>[男女同款] One Star Pro复古低帮运动鞋 中性</p>
      <span>价格</span>
      <s>￥599.00</s>
      <span>￥569.00</span>
      <div id="small-box">
        <div id="mask"></div>
      </div>
      <div id="big-box"></div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul>
        <li>低帮滑板运动鞋搭配优质磨面皮革面料</li>
        <li>棉质鞋带</li>
        <li>发泡材质鞋底，提升冲击保护</li>
        <li>橡胶外底，抓地力强</li>
        <li>鞋舌松紧带增强保护效果</li>

      </ul>
      <h3>价格说明（此说明仅当出现价格比较时有效）</h3>

      <ul>

        <li>划线价格：划线的价格可能是商品的专柜吊牌价或正品零售价指导价或该商品的曾经展示过的销售价等，仅供您参考。</li>
        <li>未划线价格：未划线的价格是商品在官网上的销售标价，具体的成交价格可能因为会员使用优惠券发生变化，最终以订单结算页价格为准。</li>
        <li></li>
      </ul>
      <div>
        <p>One Star</p>
      </div>
    </div>
    <div class="right">
      <div>
        <img src="../kuangwei/img3/0.png" alt="">
      </div>
      <p>色:棕色</p>
      <p>型号: <span>A03675c283</span> </p>
      <p><a href="">尺码对照表</a></p>
      <div></div>
      <p>尺码换算器</p>
      <p>本鞋款尺码通常偏小，建议可以选择大半码，或对照尺码表。</p>
      <div>
        <span>请输入您的尺码</span>
        <select name="" style="width: 70px;height:28px; font-size: 16px" class="select">
          <option value="">35</option>
          <option value="">35.5</option>
          <option value="">36</option>
          <option value="">37</option>
          <option value="">37.5</option>
          <option value="">38</option>
          <option value="">38.5</option>
          <option value="">39</option>
          <option value="">40</option>
          <option value="">40.5</option>
          <option value="">41</option>
          <option value="">42</option>
          <option value="">42.5</option>
          <option value="">43</option>
          <option value="">44</option>
          <option value="">44.5</option>
          <option value="">45</option>
        </select>
      </div>
      <div>
        <span>数量</span>
        <select name="" style="width: 70px;height:28px; font-size: 16px">
          <option value="">1</option>
          <option value="">2</option>
          <option value="">3</option>
          <option value="">4</option>
          <option value="">5</option>
        </select>
      </div>
      <div>立即购买</div>
      <div>+添加到购物车</div>
    </div>
  </div>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href=""><img src="../kuangwei/imgs/10005.png" alt="" /></a>
        <a href="">
          <p>【男女同款】All Star CX高帮帆布鞋小白鞋</p>
        </a>
        <s>￥649.00</s><br />
        <span>￥499.00</span>
      </div>
      <div class="swiper-slide">
        <a href=""><img src="../kuangwei/imgs/10045.png" alt="" /></a>
        <a href="">
          <p>【男女同款】Run Star Hike厚底帆布鞋小白鞋</p>
        </a>
        <s>￥699.00</s><br />
        <span>￥619.00</span>
      </div>
      <div class="swiper-slide">
        <a href=""><img src="../kuangwei/imgs/10013.png" alt="" /></a>
        <a href="">
          <p>【男女同款】One Star经典款翻毛皮休闲鞋</p>
        </a>
        <s>￥599.00</s><br />
        <span>￥409.00</span>
      </div>
      <div class="swiper-slide">
        <a href=""><img src="../kuangwei/imgs/10005.png" alt="" /></a>
        <a href="">
          <p>【男女同款】All Star CX高帮帆布鞋小白鞋</p>
        </a>
        <s>￥649.00</s><br />
        <span>￥499.00</span>
      </div>
      <div class="swiper-slide">
        <a href=""><img src="../kuangwei/imgs/10045.png" alt="" /></a>
        <a href="">
          <p>【男女同款】Run Star Hike厚底帆布鞋小白鞋</p>
        </a>
        <s>￥699.00</s><br />
        <span>￥619.00</span>
      </div>
      <div class="swiper-slide">
        <a href=""><img src="../kuangwei/imgs/10013.png" alt="" /></a>
        <a href="">
          <p>【男女同款】One Star经典款翻毛皮休闲鞋</p>
        </a>
        <s>￥599.00</s><br />
        <span>￥409.00</span>
      </div>
      <div class="swiper-slide">
        <a href=""><img src="../kuangwei/imgs/10047.png" alt="" /></a>
        <a href="">
          <p>【男女同款】Chuck 70低帮帆布鞋奶茶色</p>
        </a>
        <s>￥549.00</s><br />
        <span>￥439.00</span>
      </div>
      <div class="swiper-slide">
        <a href=""><img src="../kuangwei/imgs/10048.png" alt="" /></a>
        <a href="">
          <p>【男女同款】Chuck 70当季新色高帮帆布鞋</p>
        </a>
        <s>￥599.00</s><br />
        <span>￥469.00</span>
      </div>
    </div>


  </div>
  <div class="btn">
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
  <!-- Swiper JS -->
  <script src="./js/swiper.min.js"></script>
  <script src="./js/fangdajing.js"></script>
  <!-- Initialize Swiper -->
  <script>

    let oSmallbox = document.getElementById("small-box");
    let oMask = document.getElementById("mask");
    let oBigbox = document.getElementById("big-box");
    let oLis = document.getElementsByTagName("li");

    let mf = new MF(oSmallbox, oMask, oBigbox, oLis);
    // 这是新增的效果模板，添加这个就变成分页了
    // swiper - container',
    var swiper = new Swiper('.swiper-container',
      {
        slidesPerView: 4,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
  </script>
</body>

</html>